<template>
  <section id="foot_guide">
    <section @click = "gotoAddress('/main/home')" class="guide_item">
      <span>外卖</span>
    </section>
    <section @click = "gotoAddress('/main/historyOrder')" class="guide_item">
      <span>搜索</span>
    </section>
    <section @click = "gotoAddress('/main/historyOrder')" class="guide_item">
      <span>订单</span>
    </section>
    <section @click = "gotoAddress('/main/mine')" class="guide_item">
      <span>我的</span>
    </section>
  </section>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        created() {
        },
        mounted() {
        },
        computed: {

        },
        methods: {
            gotoAddress(path) {
                this.$router.push(path);
            }
        }

    }
</script>

<style lang="scss" scoped>
  #foot_guide{
    background-color: #fff;
    position: fixed;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    box-shadow: 0 -0.026667rem 0.053333rem rgba(0,0,0,.1);
  }
  .guide_item{
    flex: 1;
    display: flex;
    text-align: center;
    flex-direction: column;
    align-items: center;
  }
</style>
